<template>
  <div class="transport-map">
    <nav-bar title="地图详情"></nav-bar>
    <div class="view-wrapper send" @click="movePoint(1)">发货围栏</div>
    <div class="view-wrapper receive" @click="movePoint(2)">收货围栏</div>
    <div class="view-wrapper playback" :style="previewStyle" @click="start">
      {{ previewText ? previewText : '轨迹回放' }}
    </div>
    <div id="container" ref="mapRef"></div>
  </div>
</template>

<script lang="ts">
import NavBar from '@/components/NavBar.vue'
import useMapMonitor from './useMapMonitor'
import { computed } from '@vue/reactivity'

export default {
  name: 'TransportMap',
  components: {
    NavBar
  },
  setup() {
    const { mapRef, previewText, movePoint, start } = useMapMonitor()

    const previewStyle = computed(() => {
      return {
        color: previewText.value ? '#f56c6c' : '#333'
      }
    })

    return {
      previewStyle,
      // useMapMonitor
      mapRef,
      previewText,
      movePoint,
      start
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
.transport-map {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: $main-min-height;
}

.view-wrapper {
  position: absolute;
  box-shadow: rgb(107 120 137 / 20%) 0 2px 6px 0, rgb(91 98 107 / 8%) 0 4px 10px 0;
  border-bottom: 1px solid #ccc;
  background-color: white;
  display: block;
  z-index: 100;
  padding: 6px;
  cursor: pointer;
  color: #333;
  &.send {
    left: 10px;
    top: 92px;
  }
  &.receive {
    left: 10px;
    top: 124px;
  }

  &.playback {
    left: 10px;
    top: 156px;
  }
}
</style>
